<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <!-- 表单组件，add自定义事件又触发onAdd方法 -->
          <formtop @add="onAdd" @name="getname"></formtop>
          <el-alert type="info" show-icon :closable="false">
            <span slot="title">共{{ counts }}条数据</span>
          </el-alert>
        </div>
        <div class="text item">
          <!-- 表格 add自定义事件又触发onAdd方法 -->
          <listof  :list="list" @add="onAdd" @shuaxin="getList"></listof>
          <!-- 分页 -->
          <div class="pages">
            <div class="block">
              <div class="block">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="pagesetting.page"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="pagesetting.pagesize"
                  layout="prev,pager, next,sizes, jumper"
                  :total="counts"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 创建新员工弹层，并在搜索表单组件点击的时候传给这个父组件的同时控制open关上-->
    <useradd v-if="open" :sunlist="list" :showDialog="open" @gafalse="open = false" @shuaxin="getList"></useradd>
  </div>
</template>

<script>
import formtop from '../components/formtop'
import listof from '../components/listof'
import useradd from '../components/user-add.vue'
// 引入请求
import { list } from '@/api/base/users'
export default {
  created () {
    this.getList()
  },
  data () {
    return {
      pagesetting: {
        // 默认获取(表单)list传递的参数
        page: 1,
        pagesize: 10,
        username: ''
      },
      open: false, // 开关
      list: [], // 接收传递的数据
      counts: 0 // 消息总数
    }
  },
  components: {
    formtop,
    listof,
    useradd
  },
  name: 'base-users',
  methods: {
    // 搜索
    getname (val) {
      this.pagesetting.username = val
      // 再次调用请求
      this.getList()
    },
    onAdd () {
      // console.log('被触发了')
      this.open = true
    },
    async getList () {
      const { data } = await list(this.pagesetting) // data 是所有值
      // console.log(data)
      this.list = data.list
      this.counts = data.counts
    },
    // 分页器方法
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesetting.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.getList()
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep .text {
  font-size: 14px;
}

::v-deep .item {
  margin-bottom: 18px;
}

::v-deep.clearfix:before,
::v-deep.clearfix:after {
  display: table;
  content: '';
}
::v-deep.clearfix:after {
  clear: both;
}

::v-deep .box-card {
  width: 100%;
  .el-card__header {
    border-bottom: none;
  }
  .el-alert {
    margin-top: 20px;
  }
  .el-card__body {
    position: relative;
    padding: 0 20px;
  }
}
::v-deep .pages {
  float: right;
}
</style>
